<template>
  <div>
  	
  	<mt-header title="我的自选">
  		<span  slot="left"  style="margin-left: 0.4rem;font-size: 0.37333rem;" @click="make" v-show="!header">编辑</span>
  	  <img src="../../assets/zixuan_nav_search.png" @click="search"  slot="right"  style="width: 0.4rem;margin-right: 0.4rem;"/>
		</mt-header>
		
    <v-Content>
    	<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false" >
      <v-Navigter></v-Navigter>
      <div class="topTitle" v-show="getScoreLog.length>0" >
        <span class="left">
         	 股票名称<!-- &nbsp;<img src="../../assets/my zixuan_icon_edit.png" alt="">-->
        </span>
        <span class="middle">当前价</span>
        <span class="right">涨跌幅</span>
      </div>
    	<div class="out" v-show="getScoreLog.length==0">
    			<img src="../../assets/zixuan_icon_add.png" @click="add"/>
    			<p>添加自选</p>
    	</div>
    	
     	<!--	自选列表-->
			<div 	v-for='(item,index) in getScoreLog'>		
					<div  class="wrapList"  @click="datail(item.code)">
			        <div class="details">
			        	<a   @click.stop="changUrl(index,item.code) " :class="index===flagImg? 'changImg':''" class="imgurl"   v-show="header"></a>
			          <div class="user" :class="header? 'padLeft':'' ">
			            <span>{{item.name}}</span>
			            <br>
			            <span class="tips">{{item.code}}</span>
			          </div>
			          <div class="products">
			            <span>{{item.lastPrice}}</span>
			          </div>
			          <div class="profit"  :class="color(item.risePre)" >
			            <span>{{item.risePre}}%</span>
			          </div>
			        </div>
	      	</div>
			</div> 
			
			<!--猜你喜欢-->
      <li><span class="like">猜你喜欢</span><span  class="more" @click="search">更多</span></li>
			<div class="recents">
				<div class="out-box" :class="index %3 ==2? 'right':''"  v-for="(item,index) in like" @click="datail(item.equityCode)" v-if="index<6"  >
					<p style="font-size: 0.32rem;">{{item.equityName}}</p>
					<p style="color: #56627C; font-size: 0.2933rem;">{{item.equityCode}}</p>
					<p style="font-size: .48rem;" class="red" :class="color(item.risePrice)" >{{item.lastPrice }} <img :src="img(item.risePrice)"/></p>
     			<p class="red" :class="color(item.risePrice)">
     				<span>{{item.risePrice |  toDoT}}</span>
     				<span style="margin-left: .2rem;">{{item.risePre |  toDoT}}%</span>
     			</p>
				</div>
			</div>
			</mt-loadmore>
			
    </v-Content>
   	<div class="foot" v-if="header">
			  <span style="color: #FF335B;" @click="delbefore">删除</span><span @click="changFlag">完成</span>
		</div>
    <v-Footer v-else ></v-Footer>
  </div>
</template>

<script>
import Footer from '@/components/Footer'
import Content from '@/components/ContentCenter'
import Navigter from '@/components/Navigter'
import Delete from '@/components/Delete'
import Tab from '@/components/indexTab/Tab'
import deal from '@/api/deal/index'
import { toast} from '@/util/index'
import { Header,Loadmore,CellSwipe,MessageBox} from 'mint-ui'
export default {
	
  data() {
    return {
    	headerMess:{
        src:"",
        headerText: '我的自选',
        right:'',
        clearTime:"",
      },
      list: [],
      like:[],
      getScoreLog: [],     //总数
	    pageNo: 1,           //页数
	    allLoaded: false,    //
	    bottomText: '上拉加载更多...',
	    totalPage: '',       //总共
	    scrollMode:"auto",// iphone或安卓机存在问题
	    srcImg:require("../../assets/zixuan_radio_n.png"),
	    flagImg:"",
	    header:false,
	    numCode:"",
	    
    }
  },
  components: {
    'v-Content': Content,
    'v-Footer': Footer,
    'v-Navigter': Navigter,
    'v-Tab': Tab,
    "v-Delete":Delete,
		"mt-header":Header,
		'mt-loadmore':Loadmore,
		'mt-cell-swipe':CellSwipe
  },
  methods: {
  	changFlag(){
  		this.header=!this.header;
  		this.flagImg="";
  	},
  	make(){
  		this.header=!this.header;
  		this.numCode="";
  	},
  	changUrl(num,code){
  		this.flagImg=num
  		this.numCode=code
  	},
  	delobj(a){
  		   alert(a);
  	},
  	loadTop() {
		  	this.$refs.loadmore.onTopLoaded();
		},
		loadBottom() {
	        this.pageNo += 1;
	        if (this.pageNo >= this.totalPage){
	          this.allLoaded = true;
	        }
	        setTimeout(() => {
		        let senddata = {
					    	page:this.pageNo,
					    	userId:window.localStorage.getItem("token"),
					    	plat:"mlj"
				    }
						deal.myChooseJson(senddata).then(res=>{
				            if(res.data.code==200){
				                this.getScoreLog = this.getScoreLog.concat(res.data.data.list);
												this.$refs.loadmore.onBottomLoaded();
												this.$nextTick(function () {  
						            // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，  
						            // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，  
						            // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好  
						            this.scrollMode = "touch";  
						        });  
				            } else{
				            	 console.log(res);
				            }
				      	})
	        }, 1500);
	    },
	    loadBottomUse(){
	    	console.log("上拉刷新");
	    },
  		back() {
				this.$router.back(-1)
			},
  		img(value) {
	        if(value.substring(0,1)=='-' || value==0){
	        	return require('../../assets/fall.png');
	        }else{
	        	return require('../../assets/rise.png');
	        }
	   },
	   search(){
	   		this.$router.push({path:'/Search'});
	   },
  		datail(num){
		     this.$router.push({
	            path: '/tAdd1/', 
	            name: 'tAdd1',
	            query: { 
	                "stockNum": num
	            }
	           
	        })
		   },
		   color(num){
		   		if(num<=0){
		   			 return "green";
		   		}
		   },
		   delbefore(){
		   		if(!this.numCode){
		   			return 
		   		}
		   		MessageBox.confirm('确定删除吗',"").then(()=> {
				  	   this.del();
				  	  
					})
		   			
		   			
		   },
		   
			del(){
				let senddata = {
		    	code:this.numCode,
		    	userId:window.localStorage.getItem("token"),
		    	plat:"mlj"
		    }
				deal.delChoose(senddata).then((res) => {
					if (res.data.code == 200) {
						 //this.$refs.Delete.touchStart(ev);
						 	//this.header=!this.header;
						 	this.flagImg="",
						 	this.numCode=""
						 	this.header=!this.header;
							this.init();
					} else {
						toast(res.data.message)
					}
				})
			},
			yLike(){
				/*猜你喜欢*/
					let send = {
						plat:"mlj"
					}
					deal.equityRecommend(send).then((res) => {
							if (res.data.code == 200) {
								this.like=res.data.data.guessLike;
							}else if(res.data.code==222){
			            this.$router.push({path:'/login'})
			        } else {
								toast(res.data.message)
							}
					})
			},
			init(){
	  			let senddata = {
			    	page:this.pageNo,
			    	userId:window.localStorage.getItem("token"),
			    	plat:"mlj"
			    }
					deal.myChooseJson(senddata).then((res) => {
						if (res.data.code == 200) {
							this.getScoreLog=res.data.data.list; 
							this.totalPage=res.data.data.totalPage;
						} else {
							toast(res.data.message)
						}
					})
					
  		},
  		setTime() {
	        this.clearTime=setInterval(() => { 
	            this.yLike();
	        }, 1000)
			},
  		add(){
  			this.$router.push({path:'/Search'});
  		},
  		stopScrolling(){
  				document.body.addEventListener('touchmove', e => {
					    return false
					}, false)
  		}
  },
  mounted() {
  	this.setTime();
		this.init();
			//this.stopScrolling();
  },
  destroyed () {
	  clearInterval(this.clearTime);
	},
  beforeRouteEnter(to,from,next){
    document.querySelector('title').innerText='谋略家'
      next()
  },
  filters: {
    codeTo2(value) {
      return value.substring(0, 2)
    },
    toDoT(val){
    	if(val>0){
    		 return "+"+val
    	}else{
    		return val;
    	}
    }
  }
}
</script>

<style lang='less' scoped>
@import '../../less/config.less';
.topTitle {
  height: 1.09333rem;
  width: 100%;
  font-size: 0;
  border-bottom: 1px solid #1f232e;
  padding:0 @p30;
  span {
    width: 33.33%;
    text-align: center;
    display: inline-block;
    height: 1.09333rem;
    line-height: 1.09333rem;
    color: @fcolor;
    font-size: 0.37333rem;
    img{
      width: 0.42667rem;
      height:0.42667rem;
      vertical-align:text-bottom;
    }
  }
  .left{
    text-align: left;
  }
  .right{
    text-align: right;
  }
}
.out{
	margin-bottom: 2rem;
	margin-top: 1.84rem;
	 img{
	 		display: block;
	 		margin: 0 auto;
	 		width:1.6rem;
	 		height: 1.6rem;
	 }
	 p{
	 	color: #56627C;
	 	margin-top: @p30;
	 /*	margin-bottom: 2.1466rem;*/
	 	text-align:center;
	 	font-size: 0.48rem;
	 }
}
li{
		border-bottom: 1px solid #262934;
		height: 0.8rem;
		padding:0 @p30;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: @liBg;
	.like{
		color: white;
		font-size: @f28;
	}
	.more{
		color: #56627C;
		font-size: @f24;
	}
}
.recents{
		padding: @p30 0 0;
		padding-top: 0;
		color:white;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap:wrap;
		.out-box{
				padding: @p30 0 @p30  @p30*2;
				width: 33.33%;
				border-bottom: 1px solid #262934;
			
    		.red{
    			color: #ff335b;
    			font-size: @fsize;
    		}
    		.green{
    			color: #33ffc3;
    		}
    		p{
    			height: 0.5333rem;
    			line-height: 0.5333rem;
    			border-right:1px solid #262934;
    			img{
    				width: 0.213rem;
    				height: 0.266rem;
    			}
    		}
    		
    		
    	}
    	.right{
    		p{
    			border-right: none;
    		}
    		
    	}
	}
.wrapList {
  height: 1.6rem;
  color: @fcolor;
  font-size: 0.37333rem;
  padding: 0 @p30;
  border-bottom: 1px solid #1f232e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:@liBg;
  .icon {
    width: 0.37333rem;
    height: 0.37333rem;
    line-height: 1.6;
    background-color: #ff335b;
    border-radius: 4px;
    font-size: 0.24rem;
    text-align: center
  }
  
  .details {
    display: flex;
    height: 1.6rem;
    width:100%;
    justify-content: space-between;
    align-items: center;
    a{
	    width: 1.2rem;
	    height: 1.6rem;
	    background: url(../../assets/zixuan_radio_n.png) center left no-repeat;
	    background-size: 0.5866rem 0.5866rem;
    }
    .changImg{
    	background: url(../../assets/zixuan_radio_s.png) center left no-repeat;
    	background-size: 0.5866rem 0.5866rem;
    }
    div {
      
      
    }
    .user {
      top: 0.3rem;
      left: 0;
    }
    .padLeft{
    	margin-left: -2rem;
    }
    .products {
      top: 0.45rem;
      left: 3.9rem;
      text-align: center;
    }
    .profit {
      top: 0.45rem;
      right: 0;
      width: 2.5rem;
      color: #FF335B;
      width: 1.86667rem;
      height: 0.58667rem;
      text-align: right;
    }
    .green{
    	color: #33ffc3;
    }
    .tips {
      color: @Color;
      font-size: 0.32rem;
    }
  }
}
.foot{
	position: absolute;
	background: @liBg;
	left: 0;
	bottom:0;
	height: @hwrap;
	width: 100%;
	display: flex;
	padding: 0 @p30;
	justify-content: space-between;
	align-items: center;
	font-size: @f28;
	color: #FFFFFF;
	z-index: 1000;
}
</style>

